<!DOCTYPE html>
<html>
<head>
    <title>Demo 3</title>
    <link href="themes/3/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/3/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="div1"><h2>Demo 3</h2> &nbsp;- Apple-like Image Slider
        <p>Demos: &nbsp;  &nbsp; <a href="demo1.html">1</a> &nbsp; <a href="demo2.html">2</a> &nbsp; 3 &nbsp; <a href="demo4.html">4</a> 
        &nbsp; <a href="demo5.html">5</a> &nbsp; <a href="demo6.html">6</a> &nbsp; <a href="demo7.html">7</a></p>
    </div>

    <div id="sliderFrame">
        <div id="slider">
            <a href="http://www.menucool.com/jquery-slider" target="_blank">
                <img src="images/slider-1.jpg" />
            </a>
            <img src="images/slider-2.jpg" />
            <img src="images/slider-3.jpg" alt="#htmlcaption3" />
            <img src="images/slider-4.jpg" />
        </div>
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb"><img src="images/thumb-1.gif" /></div>
            <div class="thumb"><img src="images/thumb-2.gif" /></div>
            <div class="thumb"><img src="images/thumb-3.gif" /></div>
            <div class="thumb"><img src="images/thumb-4.gif" /></div>
        </div>
        <div id="htmlcaption3" style="display: none;">
            <div style="width:190px;height:240px;display:inline-block;background:white url(images/caption3.gif) no-repeat 0 0;border-radius:4px;"></div>
        </div>
        <div id="htmlcaption4" style="display: none;">
            <div style="width:190px;height:240px;display:inline-block;background:white url(images/caption4.gif) no-repeat 0 0;border-radius:4px;"></div>
        </div>
    </div>


    <div class="div2">
        <ul>
            <li><img src="themes/3/active-bg.png" alt="" style="float:right;" />The hovered thumbnail style is achieved simply through a background image:<br /><br />
                <span class="green">#thumbs .thumb-on {background-image: url(active-bg.png);}</span><br />&nbsp;
            </li>
            <li>If there are many thumbnails and the containing block does not have enough room to show them, you can make the slider work together with our jQuery Slider. See <a href="http://www.menucool.com/slider/jquery-slideshow">jQuery Slideshow</a>.</li>
        </ul>
    </div>
</body>
</html>
